<template>
	<view class="container">
		<carHeader :title="'主页'">
		</carHeader>
		<!-- 头像 -->
		<view class="carTitle">
			<image src="../../static/车联网服务商家端-00主页03_slices/图层 3.png"></image>
			<view>{{title}},欢迎您</view>
		</view>
		<!-- 核销码 -->
		<view class="code">
			<view class="scanView">
				<view class="scan" @click="scanCodes">
					<view class="imgView">
						<image src="../../static/车联网服务商家端-00主页03_slices/扫码.png"></image>
					</view>
					<view class="codeText">扫码核销</view>
				</view>
			</view>
			<view class="inputView" @click="heXiaoMa()">
				<view class="scan">
					<view class="imgView">
						<image src="../../static/车联网服务商家端-00主页03_slices/输入2.png"></image>
					</view>
					<view class="codeText">输入核销码</view>
				</view>
			</view>
		</view>
		<!-- 主页功能 -->
		<view class="item">
			<view class="itemView">
				<view class="itemBG1">
					<navigator url="/pages/Businessstatistics/Businessstatistics" open-type="navigate">
						<view class="photoView">
							<image class="itemPhoto" src="../../static/车联网服务商家端-00主页03_slices/统计.png"></image>
						</view>
						<view class="itemText">经营统计</view>
					</navigator>
				</view>
				<view class="itemBG2">
					<navigator url="/pages/Writeoffrecords/Writeoffrecords">
						<view class="photoView">
							<image class="itemPhoto" src="../../static/车联网服务商家端-00主页03_slices/核销记录 (1).png"></image>
						</view>
						<view class="itemText">核销记录</view>
					</navigator>
				</view>
				<view class="itemBG3">
					<navigator open-type="navigate" url="/pages/consume/consume">
						<view class="photoView">
							<image class="itemPhoto" src="../../static/车联网服务商家端-00主页03_slices/123收支明细.png"></image>
						</view>
						<view class="itemText">收支明细</view>
					</navigator>
				</view>
				<view class="itemBG4">
					<navigator url="/pages/orders/orders" open-type="navigate">
						<view class="photoView">
							<image class="itemPhoto" src="../../static/车联网服务商家端-00主页03_slices/订单管理.png"></image>
						</view>
						<view class="itemText">订单管理</view>
					</navigator>
				</view>
			</view>

			<view class="itemView">
				<view class="itemBG5">
					<navigator url="/pages/cardmanagement/cardmanagement" open-type="navigate">
						<view class="photoView">
							<image class="itemPhoto" src="../../static/车联网服务商家端-00主页03_slices/卡券.png"></image>
						</view>
						<view class="itemText">卡券管理</view>
					</navigator>
				</view>

				<view class="itemBG6">
					<navigator url="/pages/repairTasks/repairTasks" open-type="navigate">
						<view class="photoView">
							<image class="itemPhoto" src="../../static/车联网服务商家端-00主页03_slices/维修.png"></image>
						</view>
						<view class="itemText">维修任务</view>
					</navigator>
				</view>
				<view class="itemBG7">
					<view class="photoView">
						<image class="itemPhoto" src="../../static/车联网服务商家端-00主页03_slices/评价管理.png"></image>
					</view>
					<view class="itemText">评价管理</view>
				</view>
				<view class="itemBG8">
					<navigator open-type="navigate" url="/pages/shopUser/shopUser">
						<view class="photoView">
							<image class="itemPhoto" src="../../static/车联网服务商家端-00主页03_slices/资料库.png"></image>
						</view>

						<view class="itemText">商户资料</view>
					</navigator>
				</view>

			</view>

			<view class="itemBG9">
				<navigator open-type="navigate" url="/pages/activityAnnounce/activityAnnounce">
					<view class="photoView">
						<image class="itemPhoto" src="../../static/车联网服务商家端-00主页03_slices/活动.png"></image>
					</view>
					<view class="itemText">活动发布</view>
				</navigator>
			</view>

		</view>
		<!-- 最新通知 -->
		<view class="advise">
			<view class="adviseHeader">
				<image class="itemPhoto" src="../../static/车联网服务商家端-00主页03_slices/消息-信息.png"></image>
				<text>最新通知</text>
				<text>今日需上门取车任务共32单 ></text>
			</view>
			<!-- 项目表单 -->
			<view class="itemForm">
				<view class="formTitle">
					<view>
						用户
					</view>
					<view>
						服务项目
					</view>
					<view>
						时间
					</view>
				</view>
				<view class="record">

					<view class="recordItem" v-for="order in orderList" :key="id">
						<view>
							{{order.username}}
						</view>
						<view>
							{{order.serve}}
						</view>
						<view>
							{{order.datetime}}
						</view>
					</view>

				</view>
			</view>
		</view>

	</view>

</template>

<script>
	export default {
		data() {
			return {
				title: "",
				orderList: [{
						id: 1,
						username: "张先生",
						serve: "汽车美容、基础保养",
						datetime: "2022-03-10 11:09"
					},
					{
						id: 2,
						username: "张先生",
						serve: "汽车精洗",
						datetime: "2022-03-10 11:09"
					},
					{
						id: 3,
						username: "张先生",
						serve: "车辆维修-上门取车",
						datetime: "2022-03-10 11:09"
					},
					{
						id: 4,
						username: "张先生",
						serve: "汽车美容、基础保养",
						datetime: "2022-03-10 11:09"
					},
					{
						id: 5,
						username: "张先生",
						serve: "车辆维修-到店维修",
						datetime: "2022-03-10 11:09"
					}
				]
			};
		},
		methods: {
			scanCodes() {
				uni.navigateTo({
					url: '/pages/scanCodes/scanCodes'
				})
			},
			heXiaoMa() {
				uni.navigateTo({
					url: '/pages/hexiao/hexiao'
				})
			},
			loadInfo() {
				uni.request({
					url: "http://localhost:8080/carShopService/loadInfo",
					success: (res) => {
						console.log(res.data.data.merId)
						//判断登录成功还是失败
						if (res.data.code == 200) { //成功
							this.title = res.data.data.pcpName
						} else {
							console.log(res.data.msg + "获取信息失败")
						}
					}
				})
			}
		},
		onShow() {
			this.loadInfo();
		}
	}
</script>

<style lang="scss">
	.code {
		position: absolute;
		background-color: #FFFFFF;
		width: 95%;
		height: 300rpx;
		top: 250rpx;
		border-radius: 50rpx;
		margin: 0 20rpx 0 20rpx;
		z-index: 1;
	}

	.carTitle {
		position: absolute;
		top: 60rpx;
		left: 40rpx
	}

	.carTitle image {
		width: 150rpx;
		height: 150rpx;
		border: 10rpx solid #5498FB;
		border-radius: 90rpx;
	}

	.carTitle view {
		position: relative;
		color: white;
		font-size: 35rpx;
		top: -120rpx;
		left: 190rpx;
	}

	.code image {
		width: 100rpx;
		height: 100rpx;
		text-align: center;
	}

	.scanView {
		width: 47.5%;
		border-right: 5rpx solid #DBDBDB;
		margin: 60rpx 0 80rpx 0;
	}

	.scan {
		width: 150rpx;
		margin: auto;
	}

	.imgView {
		width: 110rpx;
		margin: auto;
	}

	.codeText {
		font-size: 30rpx;
		margin-top: 25rpx;
		text-align: center;
	}

	.inputView {
		position: relative;
		top: -260rpx;
		left: 350rpx;
		width: 47.5%;
		margin: 60rpx 0 80rpx 0;
	}

	.item {
		background-color: #FFFFFF;
		width: 95%;
		height: 660rpx;
		border-radius: 50rpx;
		margin: 235rpx 20rpx 0 20rpx;
		z-index: 1;
	}

	.itemView {
		display: flex;
		justify-content: space-around;
		padding-top: 60rpx;
	}

	.itemView>view {
		width: 125rpx;
		height: 125rpx;
		border-radius: 90rpx;
	}

	.itemView .itemBG1 {
		background-color: #19C9FF;
	}

	.itemView .itemBG2 {
		background-color: #FF9046;
	}

	.itemView .itemBG3 {
		background-color: #5F9BFF;
	}

	.itemView .itemBG4 {
		background-color: #FFA900;
	}

	.itemView .itemBG5 {
		background-color: #5896FF;
	}

	.itemView .itemBG6 {
		background-color: #00E1A3;
	}

	.itemView .itemBG7 {
		background-color: #FD6363;
	}

	.itemView .itemBG8 {
		background-color: #12BAFF;
	}

	.itemBG9 {
		width: 125rpx;
		height: 125rpx;
		border-radius: 90rpx;
		margin: 60rpx 0 0 25rpx;
		background-color: #FF9548;
	}

	.itemPhoto {
		width: 75rpx;
		height: 75rpx;
		margin: 25rpx;
	}

	.advise {
		background-color: #FFFFFF;
		width: 95%;
		height: 650rpx;
		border-radius: 50rpx;
		margin: 25rpx 20rpx 0 20rpx;
	}

	.adviseHeader {
		position: relative;
		top: 10rpx;
		width: 95%;
		height: 100rpx;
		margin: 0 20rpx 0 20rpx;
		border-bottom: 10rpx solid #F7F7F7;
	}

	.adviseHeader image {
		position: relative;
		top: 10rpx;
		left: -10rpx;
		width: 50rpx;
		height: 50rpx;
	}

	.adviseHeader>text:first-of-type {
		position: relative;
		top: -25rpx;
		left: -20rpx;
		font-size: 40rpx;
		line-height: 80rpx;
	}

	.adviseHeader>text:last-of-type {
		position: relative;
		font-size: 30rpx;
		line-height: 80rpx;
		top: -25rpx;
		right: -20rpx;
		color: #FF7956;
	}

	.itemForm {
		width: 95%;
		margin: 40rpx 20rpx 0 20rpx;
		height: 200rpx;
	}

	.formTitle {
		display: flex;
		justify-content: space-around;
	}

	.formTitle view {
		font-size: 35rpx;
	}

	.record {
		margin: 30rpx 20rpx 0 20rpx;
	}

	.recordItem {
		display: flex;
		justify-content: space-around;
		border-bottom: 5rpx solid #F7F7F7;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
	}

	.recordItem view {
		font-size: 25rpx;
		color: #949494;
	}

	.itemText {
		font-size: 30rpx;
	}
</style>